<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-07-18 18:31:00
-->
<template>
  <div>
    <el-form label-width="80px" label-suffix=":">
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称" :disabled="true" />
      </el-form-item>

      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" />
      </el-form-item>

      <el-form-item label="价格">
        <el-input placeholder="价格" type="number" />
      </el-form-item>

      <el-form-item label="重量">
        <el-input placeholder="重量" type="number" />
      </el-form-item>

      <el-form-item label="规格描述">
        <el-input placeholder="规格描述" type="textarea" rows="4" />
      </el-form-item>

      <el-form-item label="平台属性">
        <el-form inline label-width="80px">
          <el-form-item>
            <el-select>
              <el-option label="item.valueName" value="`${item.attrId}:${item.id}`" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form inline label-width="80px">
          <el-form-item>
            <el-select>
              <el-option label="item.saleAttrValueName" value="`${item.spuId}:${item.id}`" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table stripe border style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="图片">
            <template #default="{ row }">
              <el-image style="width: 100px; height: 100px" :src="row.imgUrl" />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" />
          <el-table-column label="操作">
            <template>
              <el-button>设为默认</el-button>
              <el-tag class="ml-2" type="success">默认图片</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { useCategoryStore } from '@/stores/category'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const props = defineProps<{
  spuId: number | string
}>()
const categoryStore = useCategoryStore()
const { category3Id } = storeToRefs(categoryStore)

const reqAddSkuParams = ref({
  spuId: '',
  price: '',
  skuName: '',
  skuDesc: '',
  weight: '',
  tmId: '',
  category3Id: category3Id.value,
  skuDefaultImg: '',
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})
</script>

<script lang="ts">
export default {
  name: 'SkuFrom'
}
</script>

<style lang="scss" scoped></style>
